<template>
  <div class="page">
    <div class="login-main-sign">
      <div class="login-main-sign-name">
        <i class="login-main-sign-name-icon el-icon-third-user" />
        <input
          v-model="userPhone"
          type="text"
          placeholder="手机号或邮箱"
        >
      </div>
      <div class="login-main-sign-password">
        <i class="login-main-sign-password-icon el-icon-third-password" />
        <input
          v-model="userPassword"
          type="password"
          placeholder="密码"
          @keyup.enter="login"
        >
      </div>
    </div>
    <div class="login-main-rem">
      <input
        v-model="remember"
        class="login-main-rem-checkbox"
        type="checkbox"
      >
      <label for="">记住我</label>
      <span>登录遇到问题？</span>
    </div>
    <div class="login-main-btn" @click="login">登录</div>
    <div class="login-main-socal">
      <h6 class="login-main-socal-account">社交账号登录</h6>
      <ul class="login-main-socal-other">
        <li><i class="el-icon-third-sina" /></li>
        <li><i class="el-icon-third-wechat" /></li>
        <li><i class="el-icon-third-QQ" /></li>
      </ul>
    </div>
  </div>
</template>

<script>
import store from '@/store'
export default {
  data() {
    return {
      remember: true,
      userPhone: '',
      userPassword: ''
    }
  },
  methods: {
    login() {
      if (!this.userPhone) {
        this.$message({
          message: '请输入账号',
          type: 'error'
        })
        return
      }
      if (!this.userPassword) {
        this.$message({
          message: '请输入密码',
          type: 'error'
        })
        return
      }
      const data = {
        userPhone: this.userPhone,
        userPassword: this.userPassword
      }
      store.dispatch('Login', data).then(() => {
        this.$router.push({
          path: '/'
        })
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  .login-main-sign
    padding-top: 20px
    .login-main-sign-name
    .login-main-sign-password
      position: relative
      & input
        width: 100%
        height: 50px
        padding: 4px 12px 4px 39px
        border: 1px solid #c8c8c8
        vertical-align: middle
        border-radius: 4px 4px 0 0
        background: rgb(250, 255, 189)
        outline: none
        font-size: 14px
      .login-main-sign-password input
        border-radius: 0 0 4px 4px
        border-top: none
      .login-main-sign-name-icon
      .login-main-sign-password-icon
        position: absolute
        top: 15px
        color: #969696
        font-size: 18px
        left: 10px
  .login-main-rem
    margin-top: 20px
    text-align: left
    & label
      font-size: 13px
      color: #969696
    & span
      float: right
      font-size: .8125rem
      color: #969696
      cursor: pointer
    .login-main-rem-checkbox
      -webkit-appearance: none
      vertical-align:middle
      margin-top:0
      background:#fff
      border:#999 solid 1px
      border-radius: 3px
      min-height: 15px
      min-width: 15px
      outline: none
      &:checked
        background: #fd7a64
        outline: none
        border: none
  .login-main-btn
    background-color: #ea6f5a
    margin-top: 20px
    padding: 10px
    font-size: 17px
    color: #fff
    cursor: pointer
    border-radius: 20px
    &:hover
      background: #ee5c43
  .login-main-socal
    margin-top: 60px
    .login-main-socal-account
      color: #aaa9a9
      position: relative
      &::before
      &::after
        content: ""
        border-top: 1px solid #969696
        display: block
        position: absolute
        width: 60px
        top: 5px
      &::before
        left: 30px
      &::after
        right: 30px
  .login-main-socal-other
    padding-left: 0
    list-style-type: none
    display: flex
    justify-content: space-around
    & li
      display: inline-block
      & i
        font-size: 30px
        cursor: pointer
      &:nth-child(1)
        color: #e05244
      &:nth-child(even)
        color: #00bb29
      &:nth-child(3)
        color: #498ad5
</style>
